<template>
	<div>
		<UpdateRole />
		<Assignment/>
		<el-table :data="list" style="width: 100%" border stripe>
			<el-table-column type="expand">
				<template v-slot="scopeData">
					<!-- 二级，三级菜单组件 -->
					<ChildrenTable :scopeData="scopeData.row" />
				</template>
			</el-table-column>
			<el-table-column type="index"> </el-table-column>
			<el-table-column prop="roleName" label="角色名称"> </el-table-column>
			<el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
			<el-table-column prop="date" label="操作">
				<template v-slot="scopeData">
					<div class="btn">
						<Tooltip Tips="编辑">
							<template>
								<el-row>
									<el-button
										type="primary"
										icon="el-icon-edit"
										size="small"
										@click="update(scopeData.row)"
										>编辑
									</el-button>
								</el-row>
							</template>
						</Tooltip>

						<div>
							<Tooltip Tips="删除">
								<template>
									<el-row>
										<el-button
											type="danger"
											icon="el-icon-delete"
											size="small"
											@click="Delete(scopeData.row)"
											>删除</el-button
										>
									</el-row>
								</template>
							</Tooltip>
						</div>
						<div>
							<Tooltip Tips="分配权限">
								<el-row>
									<el-button
										icon="el-icon-setting"
										type="warning"
										size="small"
										@click="assignment(scopeData.row)"
									>
										分配权限</el-button
									>
								</el-row>
							</Tooltip>
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import Tooltip from '../users/Tooltip.vue'
import UpdateRole from './UpdateRole.vue'
import ChildrenTable from './ChildrenTable.vue'
import Assignment from './assignment.vue'
export default {
	name: 'RoleTable',
	data() {
		return {
			list: [],
			keysDefault:[],
		}
	},
	components: {
		Tooltip,
		UpdateRole,
		ChildrenTable,
		Assignment,
	},
	created() {
		this.$bus.$on('getRolesData', data => {
			this.list = data
		})
	},
	methods: {
		update(data) {
			this.$bus.$emit('startDialog', data)
		},
		assignment(role) {
			this.keysDefault = []
			this.getArray(role,this.keysDefault)	
			this.$bus.$emit('toggleBollean')
			this.$bus.$emit('keysDefault',this.keysDefault)		
			this.$bus.$emit('Roleauthorization',role.id)
		},
		getArray(node, array) {
			if (!node.children) {
				return array.push(node.id)
			}
			node.children.forEach(item => {
				this.getArray(item, array)
			})
		},
		Delete(data) {
			this.$confirm('此操作将永久删除该角色?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})

				.then(() => {

					this.$http
						.delete(`/roles/${data.id}`)
						.then(response => {
							let { meta } = response.data
							if (meta.status == 200) {
								this.$message({
									type: 'success',
									message: meta.msg,
								})
							} else {
								this.$message.error('删除失败')
								return
							}
							this.$bus.$emit('Rolesreload')
						})
						.catch(error => {
							console.log(error)
						})
				})

				.catch(() => {})

		},
	},
}
</script>

<style scoped>
.btn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
</style>
